<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
</body>
<script>
  /** 1.HTML5 扩展了 HTMLDocument 类型，增加了更多功能。与其他 HTML5 定义的 DOM 扩展一样，这些变化同样基于所有浏览器
   *    事实上都已经支持的专有扩展。
   * **/
  /** 2.属性拓展
   *    a.readyState 属性
   *      + loading，表示文档正在加载；
   *      + complete，表示文档加载完成;
   *      + 实际开发中，最好是把 document.readState 当成一个指示器，以判断文档是否加载完毕。在这个属性得到广泛支持以前，通常要依赖 onload 事件处理程序设置
   *        一个标记，表示文档加载完了。
   *    b.compatMode 属性
   *      + 自从 IE6 提供了以标准或混杂模式渲染页面的能力之后，检测页面渲染模式成为一个必要的需求。
   *      + IE 为 document 添加了 compatMode 属性，这个属性唯一的任务是指示浏览器当前处于什么渲染模式。
   *      + 标准模式下 document.compatMode 的值是"CSS1Compat"，而在混杂模式下，document.compatMode 的值是"BackCompat"。HTML5 最终也把 
   *        compatMode 属性的实现标准化了。
   *    c.head 属性
   *      + 作为对 document.body（指向文档的<body>元素）的补充，HTML5 增加了 document.head 属性，指向文档的<head>元素。可以像下面这样直接取得
   *        <head>元素：
   * **/
   function checkAttributeExtension(){
     // 1.readyState(页面加载完成标识)
     if(document.readyState === 'complete'){
       console.log('文档已经加载完成了');
     }
     if(document.readyState === 'loading'){
       console.log('文档未加载完成');
     }
     // 2.compatMode(页面渲染模式)
     if(document.compatMode === 'CSS1Compat'){
      console.log("Standards Mode");
     } else if(document.compatMode === 'BackCompat'){
       console.log("Quirks Mode");
     }
     // 3.head 元素
     console.log(document.head === document.getElementsByTagName('head')[0]);
   }
   checkAttributeExtension();
   //文档未加载完成
   //Standards Mode
   //true
   window.onload = function(){
    if(document.readyState === 'complete'){
       console.log('文档已经加载完成了');
     }
   }
   //文档已经加载完成了
</script>
</html>
